<template>
  <div>
    <el-form ref="userform" :model="userInfo" label-width="80px">
      <el-form-item label="用户id" prop="id">
        <el-input v-model="userInfo.id"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="name">
        <el-input v-model="userInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input-number v-model="userInfo.age" :min="1" :max="200" label="年龄"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save('userform')">立即保存</el-button>
        <el-button type="success" @click="clearUser('userform')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <el-table
        :data="userList"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="id"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import User from "../api/user.js"
export default {
  name: "UserManage",
  data(){
    return{
      userInfo:{
        id:null,
        name:"",
        age:null
      },
      userList:[]
    }
  },
  created() {
    this.list();
  },
  methods:{
    getById(id){
      const data = {"id":id}
      User.getById(data).then((res)=>{
        if(res.code === 1){
          this.userInfo = res.data
        }
      })
    },
    save(formName){
      User.save(this.userInfo).then((res)=>{
        if(res.code === 1){
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          this.list()
        }else{
          this.$message.error('保存异常:'+res.msg);
        }
      })
    },
    list(){
      User.list().then((res)=>{
        if(res.code === 1){
          this.userList = res.data
        }else{
          this.$message.error('查询异常:'+res.msg);
        }
      });
    },
    clearUser(formName){
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>

</style>